<template>
  <div class="change-price-dialog">

    <el-dialog
      v-model="dialogVisible"
      title="代理产品变更交易价"
      width="1000px"
      :before-close="handleClose"
    >
      <el-form
        class="special-form"
        label-width="150px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="代理产品与价格编号">
              {{ productPrice.agentProductNumber }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品名称">
              {{ productPrice.productPopularName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="批准文号">
              {{ productPrice.approvalNumber }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="包装规格">
              {{ productPrice.packSpecs }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="代理商名称">
              {{ datas.agentName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="代理属性">
              {{ getLabel(type == 'agent' ? 'agent' : 'agent_person' , productPrice.agentAttribute) }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="代理地区">
              <area-list-view :areas="productPrice.region" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责营销职员">
              {{ productPrice.headName }}
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <el-form
        ref="ruleForm"
        :model="formData"
        :rules="rules"
        label-width="150px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="变更原因"
              prop="remark"
            >
              <el-input
                v-model="formData.remark"
                type="textarea"
                placeholder="请输入变更原因"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="当前交易价">
              <price-input
                v-model:data="productPrice.tradePrice"
                is-unit
                unit-str="元"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="变更后交易价"
              prop="changePrice"
            >
              <price-input
                v-model:data="formData.changePrice"
                placeholder="请输入变更后交易价"
                is-unit
                unit-str="元"
              />
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>

      <el-checkbox
        v-model="formData.checked"
        label="同时更新关联交易终端中的交易价"
      />

      <el-table
        v-if="formData.checked"
        border
        header-cell-class-name="table-header"
        :data="tableData"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          :selectable="selectable"
        />
        <el-table-column
          header-align="center"
          align="center"
          label="终端名称"
        >
          <template #default="scope">
            <span>{{ scope.row.terminalName }}</span>

            <el-popover
              v-if="scope.row.errorStatus || scope.row.isRepeat"
              placement="top-start"
              :width="200"
              trigger="hover"
            >
              <span v-if="scope.row.errorStatus">{{ errMap[scope.row.errorStatus] }}</span>
              <span v-else>终端已添加</span>

              <template #reference>
                <el-icon style="margin-left: 10px">
                  <info-filled />
                </el-icon>
              </template>
            </el-popover>

          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="适用终端"
          prop="type"
        >
          <template #default="scope">
            {{ getLabel('app_mode',scope.row.terminalType) }}
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="所在地区"
        >
          <template #default="scope">
            {{ scope.row.provinceName }}{{ scope.row.cityName }}{{ scope.row.areaName }}
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="终端价(元)"
        >

          <template #default="scope">
            ¥{{ scope.row.terminalPrice }}
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="当前交易价(元)"
        >
          <template #default="scope">
            ¥{{ scope.row.tradePrice }}
          </template>
        </el-table-column>
      </el-table>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button
            type="primary"
            @click="dialogConfirm"
          >提交审核</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import {InfoFilled} from '@element-plus/icons'
import {defineComponent, getCurrentInstance, inject, reactive, ref, toRefs,} from 'vue'

export default defineComponent({
  name: 'ChangePriceDialog',
  components: { InfoFilled },
  props: {
    datas: {
      type: Object,
      default: {},
    },
    type: {
      type: String,
      default: '',
    },
  },
  setup(props, { emit }) {
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    const rules = ref({
      changePrice: [
        {
          required: true,
          message: '请输入变更后交易价',
          trigger: 'blur',
        },
      ],
      remark: [
        {
          required: true,
          message: '请输入变更原因',
          trigger: 'blur',
        },
      ],
    })

    var ruleForm = ref(null)
    var dialogVisible = ref(false)
    var data = reactive({
      productPrice: {},
      formData: {
        changePrice: '',
        remark: '',
        checked: false,
        selects: [],
      },
      tableData: [],
    })

    const getListData = () => {
      const a = {
        agentProductId: data.productPrice.id,
      }
      api.signedAgent
        .RELATIONSTANDARD_GET_LIST_BY_EDIT_AGENT_PRODUCT(a)
        .then((res) => {
          if (!res.code && res.data) {
            data.tableData = res.data.list
          }
        })
    }

    const openDialog = (a) => {
      data.productPrice = a
      // data.formData.changePrice = data.productPrice.tradePrice
      getListData()
      dialogVisible.value = true
    }

    const handleClose = () => {
      dialogVisible.value = false
      data.formData = {
        changePrice: '',
        remark: '',
        checked: false,
        selects: [],
      }
    }

    const dialogConfirm = () => {
      ruleForm.value.validate((val) => {
        if (val) {
          const a = {
            id: data.productPrice.id,
            newTradePrice: Number(data.formData.changePrice),
            reason: data.formData.remark,
            isUpdateStandard: Number(data.formData.checked),
            standardIds: [],
          }
          if (data.formData.selects.length) {
            data.formData.selects.forEach((item) => a.standardIds.push(item.id))
          }
          api.signedAgent.AGENT_PRODUCT_UPDATE_PRICE(a).then((res) => {
            if (!res.code) {
              currentInstance.proxy.customMessage({
                type: 'success',
                message: '操作成功',
              })
              emit('success')

              handleClose()
            } else {
              currentInstance.proxy.customMessage({
                type: 'error',
                message: res.msg,
              })
            }
          })
        }
      })
    }

    const handleSelectionChange = (val) => {
      data.formData.selects = val
    }

    const selectable = (row) => {
      return true
    }

    return {
      dialogVisible,
      rules,
      ...toRefs(data),
      ruleForm,

      openDialog,
      handleClose,
      dialogConfirm,
      handleSelectionChange,
    }
  },
})
</script>

<style lang="scss" scoped>
.change-price-dialog {
  .special-form {
    .el-form-item {
      margin-bottom: 10px;
    }
  }
}
</style>
